<!-- 结决算管理-在综合查询中增加决算导出功能 -->
<template>
  <el-container class="electronicSignature">
    <el-header height="36px">
      <header-title :title="$route.meta.title" />
    </el-header>
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件" show-fold @setHeight="setHeight">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm
              ref="formRef"
              v-model="queryParams"
              :form-option="formOption"
              :select-list="dicLists"
              @handleEvent="handleEvent"
            />
            <div class="searchBtn">
              <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
              <el-button class="pms-button-primary" size="small" @click="dialogCheckbox = true">
                自定义列
              </el-button>
            </div>
          </div>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
          <template #header-btn>
            <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
          </template>
          <template #body>
            <MyTable
              id="id"
              ref="myTableRef"
              :table-data="tableData"
              :columns="colOption"
              :col-option-enum="dicLists"
            />
            <pagination
              v-if="pageParam.total > 10"
              :total="pageParam.total"
              :page.sync="pageParam.pageNum"
              :limit.sync="pageParam.pageSize"
              @pagination="doSearch"
            />
          </template>
        </SearchList>
        <!-- 自定义列配置 -->
        <el-dialog
          v-dialogDrag
          title="列表字段配置"
          width="50%"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogCheckbox"
        >
          <div class="dialogCheckbox">
            <SetDynamics
              ref="customRef"
              :fixed-check-option="fixedCheckOption"
              :custom-check-option="customCheckOption"
              :span-clo="8"
            />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button class="pms-button-primary" size="small" @click="activeCustomCheck">确 定</el-button>
            <el-button class="pms-button-primary" size="small" @click="dialogCheckbox = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
    import HeaderTitle from '@/components/basic/HeaderTitle'
    import SearchPanel from '@/components/basic/SearchPanel'
    import MyForm from '@/components/basic/myForm'
    import SearchList from '@/components/basic/SearchList'
    import MyTable from '@/components/basic/myTable'
    import SysConst from '@/common/const'
    import SetDynamics from '@/components/basic/setDynamics.vue'
    import BtnConfig from '@/components/basic/btnConfig.vue'
    import { getDropdownData } from '@/api/common' // 字典接口
    import { queryFinPageListCount, queryFinPageList, getProvinceInfo, getCityInfo, getCountryInfo, finalAsyncExport } from '@/api/SettlementAndFinalAccounts/SettlementAndFinalAccountsExport/index' // 列表接口

    // 定义配置
    // 查询条件配置
    const formOption = {
        size: 'mini',
        inline: true,
        labelWidth: '160px',
        itemData: [
            {
                type: 'input',
                prop: 'prjName',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '项目名称'
            },
            {
                type: 'input',
                prop: 'prjCode',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '项目编码'
            },
            {
                type: 'input',
                prop: 'fixedAmountStart',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '暂估转固金额'
            },
            {
                type: 'input',
                prop: 'fixedAmountEnd',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '至'
            },
            {
                type: 'select',
                prop: 'provinceCode',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '所属省份',
                disabled: false,
                dicType: 'PROVINCE_DIC',
                dicProp: {
                    label: 'AREANAME',
                    value: 'AREAID'
                }
            },
            {
                type: 'mulSelect',
                prop: 'cityCode',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                disabled: false,
                label: '所属地市',
                dicType: 'CITY_DIC',
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'mulSelect',
                prop: 'countyCode',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                disabled: false,
                label: '所属管理区域',
                dicType: 'COUNTY_DIC',
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'mulSelect',
                prop: 'prjType',
                value: '',
                width: '',
                colSpan: 6,
                clearable: true,
                label: '项目类型',
                dicType: 'PROJ_TYPE',
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'mulSelect',
                prop: 'buildModes',
                value: '',
                width: '',
                colSpan: 6,
                label: '建设方式',
                dicType: 'BUILD_MODES',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'plType',
                value: '',
                width: '',
                colSpan: 6,
                label: '批量立项类型',
                dicType: 'PL_TYPE',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'isPl',
                value: '',
                width: '',
                colSpan: 6,
                label: '是否批量立项',
                dicType: 'COF_YESORNO', // 跟 是否非标项目 用的同一字典
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'isNonstandard',
                value: '',
                width: '',
                colSpan: 6,
                label: '是否非标项目',
                dicType: 'COF_YESORNO',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'isPush',
                value: '',
                width: '',
                colSpan: 6,
                label: '决算送审状态',
                dicType: 'IS_PUSH',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'auditState',
                value: '',
                width: '',
                colSpan: 6,
                label: '决算审计状态',
                dicType: 'FIN_AUDIT_STATE',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'select',
                prop: 'ifModel',
                value: '',
                width: '',
                colSpan: 6,
                label: '是否模块化',
                dicType: 'COF_YESORNO',
                clearable: true,
                dicProp: {
                    label: 'dictName',
                    value: 'dictId'
                }
            },
            {
                type: 'datePicker',
                prop: 'returnTime',
                dateType: 'daterange',
                value: '',
                width: '',
                colSpan: 6,
                label: '退回时间',
                clearable: true,
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd'
            },
            {
                type: 'datePicker',
                prop: 'internalAcceptDate',
                dateType: 'daterange',
                value: '',
                width: '',
                colSpan: 6,
                label: '内部验收完成时间',
                clearable: true,
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd'
            },
            {
                type: 'datePicker',
                prop: 'iverStartDataTime',
                dateType: 'daterange',
                value: '',
                width: '',
                colSpan: 6,
                label: '实际交付时间',
                clearable: true,
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd'
            }
        ]
    }

    // 列表表头配置
    const colOption = [
        { label: '项目编码', width: '', prop: 'prjCode' },
        { label: '项目名称', width: '', prop: 'prjName' },
        { label: '所属省分', width: '80', prop: 'provinceName' },
        { label: '所属地市', width: '100', prop: 'cityName' },
        { label: '管理区域', width: '180', prop: 'countyName' },
        { label: '单位编号', width: '180', prop: 'orgCode' },
        { label: '决算送审状态', width: '', prop: 'isPush', dicType: 'IS_PUSH', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '决算审计状态', width: '', prop: 'auditState', dicType: 'FIN_AUDIT_STATE', dicProp: { label: 'dictName', value: 'dictId' }},
        { label: '退审原因', width: '', prop: 'returnCause' },
        { label: '退审时间', width: '100', prop: 'returnData' }
    ]

    // 列表按钮配置
    const btnOption = [
        { label: '决算单导出', fun: 'derive', type: '' }
    ]

    const customCheckOption = [
        {
            prop: 'totalCost',
            label: '立项批复金额(不含税)'
        },
        {
            prop: 'desInvest',
            label: '设计批复金额(不含税)'
        },
        {
            prop: 'trailFee',
            label: '送审金额(不含税)'
        },
        {
            prop: 'fixedAmount',
            label: '暂估转固金额(不含税)'
        },
        {
            prop: 'completedDate',
            label: '竣工决算时间'
        },
        {
            prop: 'returnType',
            label: '退审类型'
        }
    ]
    export default {
        name: 'ElectronicSignature',
        components: {
            HeaderTitle,
            SearchPanel,
            SearchList,
            MyTable,
            MyForm,
            // ChooseUnit,
            SetDynamics,
            BtnConfig
        },
        data() {
            return {
                queryParams: {}, // 查询数据
                formOption, // 查询条件配置项
                // customCheck: '', // 查询条件建设单位选择后显示
                // dialogUnit: false, // 建设单位弹框
                tableData: [], // 列表数据
                colOption, // 列表表头
                btnOption, // 列表按钮
                fixedCheckOption: colOption, // 固定字段
                customCheckOption, // 自定义字段
                dialogCheckbox: false, // 自定义列表弹框
                dicLists: {}, // 下拉框字典选项集合
                // 分页信息
                pageParam: {
                    pageSize: SysConst.PAGESIZE, // 每页显示val条
                    pageNum: SysConst.CURRENT_PAGE, // 当前页
                    total: SysConst.TOTAL // 总数
                },
                // 省分
                provinceCode: [],
                // 地市
                cityCode: [],
                // 区县
                countyCode: [],
                urlList: {},
                loginData: '', // 本地存储获取身份信息
                loginDataId: '' // 本地存储获取身份信息ID
            }
        },
        created() {
            const urlVal = window.location.href
            this.urlList = this.GetRequest(urlVal)
            console.log(this.urlList, 'this.urlList')
            this.loginData = JSON.parse(sessionStorage.getItem('SET_LOGINDATA'))
            this.loginDataId = this.loginData ? this.loginData.workGroupId : ''
            this.$nextTick(() => {
                this.setHeight(false)
            })
            this.getDictData()
            // 初始化省分
            this.getProvince()
        },
        mounted() {
            this.queryParams.provinceCode = this.urlList.province === 'zb' ? '' : this.urlList.province
            this.queryParams.cityCode = this.urlList.city
            this.queryParams.countyCode = this.urlList.county
            this.queryParams.prjType = this.urlList.proType
            this.queryParams.buildModes = this.urlList.buildModes
            if (this.queryParams.provinceCode && this.queryParams.provinceCode !== 'zb') {
                this.getCity(this.queryParams.provinceCode)
            }
            // if (this.queryParams.provinceCode === 'zb') {
            //     this.doSearch()
            // }
        },
        methods: {
            // 查看数据
            doSearch(item) {
                if (!this.queryParams.provinceCode) {
                    this.$message.info('请先填写所属省分然后再查询')
                    return
                }
                console.log(this.queryParams, 'this.queryParamsthis.queryParams666666')
                const params = {
                    pageNum: item?.page || SysConst.CURRENT_PAGE,
                    pageSize: item?.limit || SysConst.PAGESIZE,
                    param: {
                        // returnStartData: this.queryParams?.returnTime?.length ? this.queryParams.returnTime[0] : '',
                        // returnEndData: this.queryParams?.returnTime?.length ? this.queryParams.returnTime[1] : '',
                        // acceptStartData: this.queryParams?.internalAcceptDate?.length ? this.queryParams.internalAcceptDate[0] : '',
                        // acceptEndData: this.queryParams?.internalAcceptDate?.length ? this.queryParams.internalAcceptDate[1] : '',
                        // deliverStartData: this.queryParams?.iverStartDataTime?.length ? this.queryParams.iverStartDataTime[0] : '',
                        // deliverEndData: this.queryParams?.iverStartDataTime?.length ? this.queryParams.iverStartDataTime[1] : '',
                        returnStartData: this.optimizeNewOne(this.queryParams?.returnTime?.length, this.queryParams.returnTime[0]),
                        returnEndData: this.optimizeNewOne(this.queryParams?.returnTime?.length, this.queryParams.returnTime[1]),
                        acceptStartData: this.optimizeNewOne(this.queryParams?.internalAcceptDate?.length, this.queryParams.internalAcceptDate[0]),
                        acceptEndData: this.optimizeNewOne(this.queryParams?.internalAcceptDate?.length, this.queryParams.internalAcceptDate[1]),
                        deliverStartData: this.optimizeNewOne(this.queryParams?.iverStartDataTime?.length, this.queryParams.iverStartDataTime[0]),
                        deliverEndData: this.optimizeNewOne(this.queryParams?.iverStartDataTime?.length, this.queryParams.iverStartDataTime[1]),
                        ...this.queryParams,
                        prjName: this.queryParams.prjName.trim(),
                        provinceCode: this.queryParams.provinceCode === 'zb' ? '' : this.queryParams.provinceCode,
                        orgId: this.queryParams.provinceCode === 'zb' ? this.loginDataId : ''
                    }
                }
                delete params.param.returnTime
                delete params.param.internalAcceptDate
                delete params.param.iverStartDataTime
                this.optimizeNewTwo(params)
            },
             // 2024-9-26 阻断问题if过多解决方案
            optimizeNewOne(oldLength, data) {
                return oldLength ? data : ''
            },
             // 2024-9-26 阻断问题if过多解决方案
             optimizeNewTwo(params) {
                queryFinPageList(params).then(res => {
                    if (+res.code !== 200) {
                        return Promise.reject(res)
                    }
                    this.tableData = res.data?.list
                    // this.pageParam.total = res.data?.total || 0
                    this.pageParam.pageSize = res.data?.pageSize || SysConst.PAGESIZE
                    this.pageParam.pageNum = res.data?.pageNum || SysConst.CURRENT_PAGE
                })
                queryFinPageListCount(params.param).then(res => {
                      if (+res.code !== 200) {
                        return Promise.reject(res)
                      }
                    //   this.tableData = res.data?.list;
                      this.pageParam.total = res.data
                    //   this.pageParam.pageSize = res.data?.pageSize || SysConst.PAGESIZE
                    //   this.pageParam.pageNum = res.data?.pageNum || SysConst.CURRENT_PAGE
                  })
             },
            // 查询条件事件
            handleEvent(prop, val) {
                console.log(prop, val, 'hjhjbj')
                if (prop === 'prjStatusNew') {
                    this.getPrjNodeName(val)
                    this.queryParams.prjNodeId = []
                }
                if (prop === 'isPl') {
                    this.isPlFun(val)
                }
                if (prop === 'plType') {
                    this.plTypeFun(val)
                }
                if (prop === 'provinceCode') {
                    this.getCity(val)
                }
                if (prop === 'cityCode') {
                    this.getCounty(val)
                }
            },
            isPlFun(val) {
                if (val === '0') {
                    this.queryParams.plType = ''
                }
                // const finAuditStateObject = this.dicLists['FIN_AUDIT_STATE'].find(v=>v.dictId == val)
                // props.ifModel
                // console.log(formOption.itemData.splice(13,1),'itemData')
                // console.log(finAuditStateObject, '11111111')
            },
            plTypeFun(val) {
                if (val) {
                    this.queryParams.isPl = '1'
                }
            },
            // 列表按钮点击事件
            btnClick(fun, row) {
                this[fun](row)
            },
            // 导出
            async derive(row) {
                if (!this.queryParams.provinceCode) {
                    this.$message.info('请先填写所属省分查询后,再进行导出')
                    return
                }
              const params = {
                    returnStartData: this.queryParams?.returnTime?.length ? this.queryParams.returnTime[0] : '',
                    returnEndData: this.queryParams?.returnTime?.length ? this.queryParams.returnTime[1] : '',
                    acceptStartData: this.queryParams?.internalAcceptDate?.length ? this.queryParams.internalAcceptDate[0] : '',
                    acceptEndData: this.queryParams?.internalAcceptDate?.length ? this.queryParams.internalAcceptDate[1] : '',
                    deliverStartData: this.queryParams?.iverStartDataTime?.length ? this.queryParams.iverStartDataTime[0] : '',
                    deliverEndData: this.queryParams?.iverStartDataTime?.length ? this.queryParams.iverStartDataTime[1] : '',
                    ...this.queryParams,
                    prjName: this.queryParams.prjName.trim(),
                    provinceCode: this.queryParams.provinceCode === 'zb' ? '' : this.queryParams.provinceCode,
                    orgId: this.queryParams.provinceCode === 'zb' ? this.loginDataId : ''
              }
              delete params.returnTime
              delete params.internalAcceptDate
              delete params.iverStartDataTime
              finalAsyncExport(params).then(res => {
                  if (+res.code !== 200) {
                    return Promise.reject(res)
                  }
                  this.$message.success(res.message)
              })
            },
            // 自定义列字段弹框-点击确认
            activeCustomCheck() {
                const list = this.$refs.customRef.checkboxValue
                this.colOption = [...colOption, ...list]
                this.dialogCheckbox = false
            },
            // 获取下拉框数据
            async getDictData() {
                const arr = ['PROJ_TYPE', 'BUILD_MODES', 'PL_TYPE', 'COF_YESORNO', 'IS_PUSH', 'FIN_AUDIT_STATE']
                const promises = arr.map(item => getDropdownData(item))
                const results = await Promise.all(promises)
                arr.forEach((item, i) => {
                    this.$set(this.dicLists, item, results[i].data ?? [])
                })
            },
            // 获取省分
            async getProvince() {
                const res = await getProvinceInfo()
                this.$set(this.dicLists, 'PROVINCE_DIC', res.data)
                if (res.data.length === 1) {
                    formOption.itemData[4].disabled = true
                    this.queryParams.provinceCode = res.data[0].AREAID
                    await this.getCity(res.data[0].AREAID) // 加载地市
                } else if (this.loginData && this.loginData.groupType === 0) {
                    if (this.urlList.province === 'zb') {
                        this.dicLists.PROVINCE_DIC.unshift({ AREAID: 'zb', AREANAME: '总部' })
                        this.queryParams.provinceCode = 'zb' // 省分默认值
                    } else {
                        this.dicLists.PROVINCE_DIC.unshift({ AREAID: 'zb', AREANAME: '总部' })
                        const newAreaId = res.data.filter(item => { return item.AREAID === this.queryParams.provinceCode }) // 过滤地址栏的省份编码进行赋值
                        this.queryParams.provinceCode = newAreaId[0].AREAID
                        await this.getCity(newAreaId[0].AREAID) // 加载地市
                    }
                } else {
                    console.log('[]')
                }
            },
            // 获取地市
            async getCity(code) {
                if (code) {
                    const params = {
                        provinceId: code
                    }
                    const res = await getCityInfo(params)
                    if (res.data.length <= 0) {
                        this.queryParams.cityCode = ''
                        this.queryParams.countyCode = ''
                        this.$set(this.dicLists, 'CITY_DIC', [])
                        this.$set(this.dicLists, 'COUNTY_DIC', [])
                        return
                    }
                    const cityDicList = res.data.map(item => ({
                        dictId: item.AREAID,
                        dictName: item.AREANAME
                    }))
                    this.$set(this.dicLists, 'CITY_DIC', cityDicList)
                    if (res.data.length === 1) {
                        formOption.itemData[5].disabled = true
                        this.queryParams.cityCode = res.data[0].AREAID
                        await this.getCounty(res.data[0].AREAID) // 加载管理区域
                    }
                } else {
                    this.queryParams.cityCode = ''
                    this.$set(this.dicLists, 'CITY_DIC', [])
                }
            },
            // 获取区县
            async getCounty(code) {
                if (code) {
                    const params = {
                        cityId: code
                    }
                    const res = await getCountryInfo(params)
                    if (res.data.length <= 0) {
                        this.queryParams.countyCode = ''
                        this.$set(this.dicLists, 'COUNTY_DIC', [])
                        return
                    }
                    const countyDicList = res.data.map(item => ({
                        dictId: item.AREAID,
                        dictName: item.AREANAME
                    }))
                    this.$set(this.dicLists, 'COUNTY_DIC', countyDicList)
                } else {
                    console.log('222')
                    this.queryParams.countyCode = ''
                    this.$set(this.dicLists, 'COUNTY_DIC', [])
                }
            },
            // 获取url 携带参数
            GetRequest(url) {
                var theRequest = {}
                if (url.indexOf('?') !== -1) {
                    var str = url.substr(1)
                    var strs = str.split('?')
                    var strsList = strs[1].split('&')
                    for (var i = 0; i < strsList.length; i++) {
                        theRequest[strsList[i].split('=')[0]] = strsList[i].split('=')[1]
                    }
                }
                return theRequest
            },
            // 设置高度
            setHeight(isFold) {
                const child = this.$refs.formRef.$refs
                const height = (formOption.itemData.length / 3).toFixed() - 0
                console.log(child, '🚗')
                // const height = (child.queryFormRef.$children.length / 3).toFixed() - 0
                this.$refs.queryFormBox.style.height = isFold ? `${height * 24}px` : '54px'
                child.myFormRef.style.height = isFold ? `${height * 24}px` : '54px'
            }
        }
    }
</script>

<style lang="scss" scoped>
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    margin-left: auto;
    display: flex;
    margin-top: 4px;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 8px;
    }
}

.electronicSignature {
    width: 100%;
    .mainDetails {
        padding: 20px 25px 0px;
    }
    .topRemark {
        // background-color: #fdf5e6;
        background-color: #ffefd5;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-size: 14px;

        .asterisk {
            color: #f00;
            margin-right: 2px;
            font-size: 18px;
        }
    }

    .customBtn {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin: 10px 20px 10px 90%;
        cursor: pointer;

        .el-icon-s-tools {
            font-size: 20px;
            color: #999;
            margin-right: 6px;
        }
    }
}

.el-button--text {
    color: #02A7F0;
}

.el-button--primary {
    color: #fff;
}
.dialog-footer {
    display: flex;
    justify-content: center;
}
::v-deep .el-button + .el-button {
    color: #fff;
}
// 弹框样式
::v-deep .el-dialog__body {
    max-height: 400px;
    overflow-y: auto;
}
// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
// 滚动条整体样式
width: 6px; //高宽分别对应横竖滚动条的尺寸
height: 10px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
// 滚动条里面小方块
border-radius: 10px;
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #f2f3f5;
}
::v-deep .el-range-editor.el-input__inner {
    padding: 0px 10px;
}

</style>

